<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <title>Website Geolocation</title>
        <style>
     html, body {
     height: 100%;
        margin: 0px;
     } 
     #map-canvas {
        width: 78%;
        height:100%;
        float: left;
      }
     #rightcolumn {
      padding-top:10px;
      padding-right:15px;
      width: 20%;
      float: right;
      font-size: 11px;
     
         }
         body{
          padding-top: 50px;
         }
        </style>
        <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
        <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
        <script>
    		var map;
    		var list={};
    		var c_list={};
    		var markers=[];
    		var current_window=[];
    		var m_url=[];
    		var m_time=[];
    		 var warning ={
    				    path: google.maps.SymbolPath.CIRCLE,
    				    fillColor: '#',
    				    fillOpacity: .4,
    				    scale: 6,
    				    strokeColor: 'white',
    				    strokeWeight: 1
    				};
    		 var up = {
 				    path: google.maps.SymbolPath.CIRCLE,
				    fillColor: 'green',
				    fillOpacity: .4,
				    scale: 10,
				    strokeColor: 'white',
				    strokeWeight: 1
				};
    		 
    		 var color_array=["#008000","#0D8000", "#518000","#804400", "#804000", "#802F00","#802D00", "#802B00","#802900", "#802800", "#802500","#802400","#802200","#802000", "#801E00", "#801C00","#801A00","#801500","#801300","#801100","#800D00", "#800400","#800000"];
    		 
    		function initMap() {
				var myLatlng = new google.maps.LatLng(1.2,103.8);
	            var mapOptions = {
                	zoom: 2,
                	center: myLatlng
            	};
        	    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    		}
        	
    		function mapMarkerAdder() {
        			window.setTimeout(mapMarkerAdder, 1000);
        			fetchURL();
        	}
    		
        	 /*$("#filter").submit(function(e) {
		    	    e.preventDefault();
		    	});*/
    			$(document).ready(function() {
    			    $('#filter').click(function() {
    			    	//alert( ($('#FV').val()));
    			     filter( ($('#FV').val()));  
    			     return false;
    			    });
    			    
    			});  
    			    
		    	function display(url)
		    	{
		    	alert(url);	
		    	}
        	function recoverWindow()
        	{
        		//recover original window first
        		for (var i = 0; i < markers.length; i++)
    			{            		    
    				var index=markers[i].getPosition().toUrlValue().substring(0,markers[i].getPosition().toUrlValue().indexOf(","))+markers[i].getPosition().toUrlValue().substring(markers[i].getPosition().toUrlValue().indexOf(",")+1);
    		
    				var html=list[index];
    				current_window[i].setContent( '<div style="width: 250px;height:200px;">'+c_list[index]+html+'</div>');
    			}
        	}
        	
        	function filter(domain)
        	{
        		if(document.getElementById("filterid").value == "false")
        		document.getElementById("filterid").value = "true";
        		//alert(domain);
        		//alert("marker length: " +markers.length);
        		//alert("m_url length: " + m_url.length);
        		if(domain==null||domain == (""))
        			{
        		//alert("Input is empty");//then show all the markers
        				
        				     showMarkers();
        				     recoverWindow();
        			}
        		else//show some of them
        			{
        			showMarkers();
        			recoverWindow();
        			for (var i = 0; i < markers.length; i++)
        			{            
        			//	alert("iteration: "+ (i+1)+" Work on "+ m_url[i]+" lat and Lon: "+markers[i].getPosition().toUrlValue());
        				var index=markers[i].getPosition().toUrlValue().substring(0,markers[i].getPosition().toUrlValue().indexOf(","))+markers[i].getPosition().toUrlValue().substring(markers[i].getPosition().toUrlValue().indexOf(",")+1);
        				//alert(index);
        				var html=list[index];
        				var newhtml="";
        				//alert("Original Html corresponds to this location:"+html);
        				while(html.length>0)
        					{
        					//alert(html);
        					var tmp=html.substring(0,html.indexOf("</label><br>")+12);
        					html=html.substring(html.indexOf("</label><br>")+12);
        					if(tmp.indexOf(domain)!=-1)
        						{
        						newhtml=newhtml+tmp;
        						}
        					//alert(newhtml);
        					}
        				
        				//alert("outside while");
        				
        				if(newhtml=="")
        					{
        					//alert("marker of"+m_url[i]+" set to null since New Html is empty");
        					markers[i].setMap(null);
        					}
        				
        				else{
        					//alert(newhtml);
        					if(m_url[i].indexOf(domain)==-1) 
        						{
        						//alert("Sorry though this marker's location corresponds to some URL u want, but itself does not contain the domain specified:  "+m_url[i]);
        						markers[i].setMap(null);
        						}
        					else
        						{
        						//alert("This marker contains What you want:  "+m_url[i]);
        				//alert("Thus, the new html is: "+ newhtml);
        				var c =c_list[index]+newhtml;
        			
        				current_window[i].setContent( '<div style="width: 250px;height:200px;">'+c+'</div>');
        						}
        				}
        				
        			}
        			
        			
        	}
        		return false;
        	}
        	
        	function setAllMap(map) {
        		  for (var i = 0; i < markers.length; i++) {
        		    markers[i].setMap(map);
        		  }
        		}
        	
        	function hideMarkers() {
        		  setAllMap(null);
        		}
        	
        
        		function deleteMarkers() {
        			  hideMarkers();
        			  markers = [];
        			}
      		

        		// Shows any markers currently in the array.
        		function showMarkers() {
        		  setAllMap(map);
        		}
        		var tmplist=[];
        		function load()
            	{
        			var filepath=prompt("Please enter the filepath to load", "D:/GeoFiles/");
            		var filename=prompt("Please enter the filename to load", "Result.txt");
            		if(filename==""||filepath=="")
            			{
            			alert("Please specify the correct file path and name");
            			load();
            			return false;
            			}
            		else if(filename==null||filepath==null)
        			{
        			return false;
        			}
            		
            		var data={"filename":filename,"filepath":filepath};
            		$.ajax({ 
        			    url: "/GeoLocation/load", 
        			    type: 'POST', 
        			    dataType: 'json', 
        			    data: JSON.stringify(data), 
        			    contentType: 'application/json',
        			    mimeType: 'application/json',
        			    success: function(urldata) { 
        			    	alert("load success");
        			    	//alert(urldata.length);
        			    	markdata(urldata);
        			    	
        			    	/*alert(urldata.length);
        	    			
        			    	var i=0;
      	    			  $.each(urldata, function() {
      	    				 // var count=0;
      	                      var url = this.toString().substring(0,this.indexOf(" ")).trim();
      	                      var time=this.toString().substring(this.indexOf(" ")+1).trim();
      	                      if(url.indexOf("\r")!=-1)
      	                    	  {
      	                      alert("Problematic url: |"+url+"|"+time+"|");
      	                      alert("Index of \\r is :" +url.indexOf("\r"));
      	                    	  }
      	                      else if(url.indexOf("\n")!=-1)
      	                    	  alert("Index of \\n is :" +url.indexOf("\n"));
      	                      else if(url.indexOf("\r\n")!=-1)
      	                    	  alert("Index of \\rn is :" +url.indexOf("\r\n"));
      	                      else  if(url.indexOf("\0")!=-1)
      	                    	  alert("Index of \\0 is :" +url.indexOf("\r"));
      	                    			  
      	                      //alert(url+"|"+time);
      	                      tmplist.push(url);
      	                      //alert("Iteratoin: "+i);
      	                      i++;
      	                      var flag=false;
      	                     // count++;
      	                      $.getJSON("http://ip-api.com/json/"+url+"?callback=?", function(data) {
      	                      	//alert("In ip api");
      	                  
      	                      	flag=true;
      	                      	var lat,lon,city,country;
      	                          $.each(data, function(k, v) {
      	                              if (k=="lat") {
      	                                  lat=v;
      	                              }
      	                              if (k=="lon") {
      	                                  lon=v;
      	                              }
      	                              if(k=="city")
      	                              	{
      	                              	city=v;
      	                              	}
      	                              if(k=="country")
      	                          	{
      	                          	country=v;
      	                          	}


      	                          });
      	                          var myLatlng = new google.maps.LatLng(lat,lon);
      	                          var image;
      	                          var corlor_index=time/1000;
      	                          else image = up;
      	                       var index=myLatlng.toUrlValue().substring(0,myLatlng.toUrlValue().indexOf(","))+myLatlng.toUrlValue().substring(myLatlng.toUrlValue().indexOf(",")+1);
      	                       
      	                       //alert(index);
      	                          if(list[index]==null) list[index]='<a href="http://'+url.toString()+'" target="_blank">'+
      	                              url.toString()+'</a> '+' <label style="font-weight:normal;">'+time+'ms</label><br>';
      	                          else if(list[index].indexOf(url.toString())==-1)
      	                          	list[index]=list[index] + '<a href="http://'+url.toString()+'" target="_blank">'+
      	                              url.toString()+'</a> '+' <label style="font-weight:normal;">'+time+'ms</label><br>';
      	                              
      	                          var content='<p><b>Country: </b>'+country.toString()+'</p><p><b>City: </b>'+city.toString()+'</p><p><b>Latitude and Lontitude: </b>'+lat.toString()+' , '+lon.toString()+'</p><p><b>URLs in this location, Response Time: </b></p>';
      	                          var contentString =content+list[index];
      	                          c_list[index]=content;
      	                          if(url.toString().indexOf(".sina.com.cn")!=-1)
      	                          	{
      	                          //alert(contentString);
      	                          	}
      	                     		 var infowindow = new google.maps.InfoWindow({
      	                     		      content: '<div style="width:250px;height:200px;">'+contentString+'</div>',
      	                     		  });
      	                     		
      	                         current_window.push(infowindow);
      	                         
      	                          var marker = new google.maps.Marker({
      	                              position: myLatlng,
      	                              map: map,
      	                              title: city.toString(),
      	                              icon:image,
      	                          });
      	                      
      	                          
      	                          markers.push(marker);
      	                          m_url.push(url);
      	                          m_time.push(time);
      	                        //alert("Maker "+m_url.pop()+" is at "+ markers.pop().getPosition().toUrlValue());
      	                          //markers.push(marker);
      	                          //m_url.push(url);
      	                          google.maps.event.addListener(marker, 'click', function() {
      	                          		    infowindow.open(map,marker);
      	                          		 
      	                      });
      	                          //alert("marker size now: "+markers.length);
      	                          
      	                        });
      	                      
      	                  });
      	    			  alert(markers.length);*/
        	   			     
        			    },
        			    error:function() { 
        			        alert("error");
        			    }
        			});
            	}
        		
        		function markdata(urlList){
        		alert(urlList.length);
        		//alert(markers.length);
        		//alert(current_window.length);
        		
        		$.each(urlList, function() {
        			
        			var data= this.split("\t\t\t");
        			var url=data[0];
        			var time=data[1];
        			var lat=data[2].substring(0,data[2].indexOf(","));
        			var lon=data[2].substring(data[2].indexOf(",")+1);
        			var header=data[3];
        			var city=header.substring(header.indexOf("</p><p><b>City: </b>")+"</p><p><b>City: </b>".length);
        			city=city.substring(0,city.indexOf("</p>"));
        			
        			//alert(url+"|"+time+"|"+lat+" "+lon+"|"+city+"\n"+header);
        			
        			var myLatlng = new google.maps.LatLng(lat,lon);
                    
        			var color= color_array[Math.floor(Number(time)/5000*(color_array.length-1))];
        			 var image={
            				 path: google.maps.SymbolPath.CIRCLE,
         				    fillColor:color,
         				    fillOpacity: .6,
         				    scale: 10,
         				    strokeColor: 'white',
         				    strokeWeight: 1 
            		 };
                    var index=myLatlng.toUrlValue().substring(0,myLatlng.toUrlValue().indexOf(","))+myLatlng.toUrlValue().substring(myLatlng.toUrlValue().indexOf(",")+1);
                 
                 //alert("Index is : "+index);
                    if(list[index]==null) list[index]='<a href="http://'+url.toString()+'" target="_blank">'+
                        url.toString()+'</a> '+' <label style="font-weight:normal;">'+time+'ms</label><br>';
                    else if(list[index].indexOf(url.toString())==-1)
                    	list[index]=list[index] + '<a href="http://'+url.toString()+'" target="_blank">'+
                        url.toString()+'</a> '+' <label style="font-weight:normal;">'+time+'ms</label><br>';
                        
                    var content =header.substring(header.indexOf("<div style=\"width: 250px;height:200px;\">")+"<div style=\"width: 250px;height:200px;\">".length);
                    c_list[index]=content;
     
               		 var infoW = new google.maps.InfoWindow({
               		      content: header+list[index]+"</div>",
               		  });
               		
               		
                   current_window.push(infoW);
                  
                    var marker = new google.maps.Marker({
                        position: myLatlng,
                        map: map,
                        title: city,
                        icon:image,
                    });
                
                    
                    markers.push(marker);
                    m_url.push(url);
                    m_time.push(time);
                  //alert("Maker "+m_url.pop()+" is at "+ markers.pop().getPosition().toUrlValue());
                    //markers.push(marker);
                    //m_url.push(url);
                    google.maps.event.addListener(marker, 'click', function() {
                    		    infoW.open(map,marker);
                    		 
                });
                    //alert(infoW.getContent()+"\n");
        			
        			});
        		
        		//alert(markers.length);
        		//alert(current_window.length);
        		}
        		
        		
    		// fetch new url and add them into map
        	function fetchURL() {
    			
                $.getJSON("/GeoLocation/getUrl", function(urlList) {
                	doIP(urlList);
                });
        	}
    		
    		function doIP(urlList)
    		{
    			  $.each(urlList, function() {
                      var url = this.toString().substring(0,this.indexOf(" "));
                      var time=this.toString().substring(this.indexOf(" ")+1);
                     // alert("|"+url+"|"+time+"|");
                      
                      $.getJSON("http://ip-api.com/json/"+url+"?callback=?", function(data) {
                      	//alert("In ip api");
                      	var lat,lon,city,country;
                          $.each(data, function(k, v) {
                              if (k=="lat") {
                                  lat=v;
                              }
                              if (k=="lon") {
                                  lon=v;
                              }
                              if(k=="city")
                              	{
                              	city=v;
                              	}
                              if(k=="country")
                          	{
                          	country=v;
                          	}


                          });
                          var myLatlng = new google.maps.LatLng(lat,lon);
                         
                          var color= color_array[Math.floor(Number(time)/5000*(color_array.length-1))];
                          
                         var image={
                				 path: google.maps.SymbolPath.CIRCLE,
              				    fillColor:color,
              				    fillOpacity: .6,
              				    scale: 10,
              				    strokeColor: 'white',
              				    strokeWeight: 1 
                 		 };
                         
                       var index=myLatlng.toUrlValue().substring(0,myLatlng.toUrlValue().indexOf(","))+myLatlng.toUrlValue().substring(myLatlng.toUrlValue().indexOf(",")+1);
                       
                       //alert(index);
                          if(list[index]==null) list[index]='<a href="http://'+url.toString()+'" target="_blank">'+
                              url.toString()+'</a> '+' <label style="font-weight:normal;">'+time+'ms</label><br>';
                          else if(list[index].indexOf(url.toString())==-1)
                          	list[index]=list[index] + '<a href="http://'+url.toString()+'" target="_blank">'+
                              url.toString()+'</a> '+' <label style="font-weight:normal;">'+time+'ms</label><br>';
                              
                          var content='<p><b>Country: </b>'+country.toString()+'</p><p><b>City: </b>'+city.toString()+'</p><p><b>Latitude and Lontitude: </b>'+lat.toString()+' , '+lon.toString()+'</p><p><b>URLs in this location, Response Time: </b></p>';
                          var contentString =content+list[index];
                          c_list[index]=content;
                          if(url.toString().indexOf(".sina.com.cn")!=-1)
                          	{
                          //alert(contentString);
                          	}
                     		 var infowindow = new google.maps.InfoWindow({
                     		      content: '<div style="width:250px;height:200px;">'+contentString+'</div>',
                     		  });
                     		
                         current_window.push(infowindow);
                         
                          var marker = new google.maps.Marker({
                              position: myLatlng,
                              map: map,
                              title: city.toString(),
                              icon:image,
                          });
                      
                          
                          markers.push(marker);
                          m_url.push(url);
                          m_time.push(time);
                        //alert("Maker "+m_url.pop()+" is at "+ markers.pop().getPosition().toUrlValue());
                          //markers.push(marker);
                          //m_url.push(url);
                          google.maps.event.addListener(marker, 'click', function() {
                          		    infowindow.open(map,marker);
                          		 
                      });
                        });
                  });
    		}
    		
        	function save() {
        		if(document.getElementById("stopbutton").value == "Start")
        			{
        			Restart();
        			
        			}
        		
        	else if( document.getElementById("stopbutton").value == "Stop")
        		{
    	  $.getJSON("/GeoLocation/sendStop", function() {
		     // alert("Send stop done");
		  });
		 
		 document.getElementById("stopbutton").value = "Resume";
    			var result = confirm("Do you want to save?");
    			if (result == true) {
    				writeList();
    				var content=getcontentSofar();
    				//var test="lalala";
    				window.open('data:html/csv;charset=utf-8,' + escape(content));
    			}
    
        		}
      else
    	  {
    	  $.getJSON("/GeoLocation/sendResume", function(list) {
    		  var x= confirm("Do you want to clear current markers on the map?");
        	  if(x==true)
        		  {
        		  current_window=[];
	          		  m_url=[];
	          		  list={};
	          		  c_list={};
			    	 deleteMarkers();
        		  }
        		  
        	  document.getElementById("stopbutton").value = "Stop";
        		  
		  });
    	 
    	  
    	  }
      return false;
    		}
        	
        	
        	function writeList()
        	{
        		var filepath=prompt("Please enter your filepath", "D:/GeoFiles/");
        		var filename=prompt("Please enter your filename", "Result.txt");
        		if(filename==""||filepath=="")
        			{
        			alert("Please specify the correct file path and name");
        			writeList();
        			return false;
        			}
        		else if(filename==null||filepath==null)
        			{
        			return false;
        			}
        		
        		var Clist=[];
        		var latlon=[];
        		for(var i=0;i<current_window.length;i++)
        			{
        			Clist.push(current_window[i].getContent().substring(0,current_window[i].getContent().indexOf("Response Time: </b></p>")+"Response Time: </b></p>".length));
        			latlon.push(markers[i].getPosition().toUrlValue());
        			//alert(Clist[i]+"\n\n"+latlon[i]);
        			}
        		alert(m_time.length);
        		alert(m_url.length);
        		alert(latlon.length);
        		alert(Clist.length);
        		var data={"timeList":m_time,"urlList":m_url, "filename":filename, "filepath":filepath,"something":Clist,"latlon":latlon};
        	
    			$.ajax({ 
    			    url: "/GeoLocation/writeList", 
    			    type: 'POST', 
    			    dataType: 'json', 
    			    data: JSON.stringify(data), 
    			    contentType: 'application/json',
    			    mimeType: 'application/json',
    			    success: function(data) { 
    			    	alert("Write List done!");
    	   			     
    			    },
    			    error:function() { 
    			        alert("error");
    			    }
    			});
        	}
        	
        	
        	function  getcontentSofar()
        	{
        		var content='<!DOCTYPE html><html><head> <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"><title>Crawling History</title></head><body>';
				//alert(content);
        		for (var i = 0; i < markers.length; i++)
    			{            		    
    				var index=markers[i].getPosition().toUrlValue().substring(0,markers[i].getPosition().toUrlValue().indexOf(","))+markers[i].getPosition().toUrlValue().substring(markers[i].getPosition().toUrlValue().indexOf(",")+1);
    				//alert(index);
    				var html=list[index];
    				if(content.indexOf(html)==-1)
    					{
    				content=content+html;
    					}
    				//alert("content is now: \n "+content);
    				}
    				//alert("content after the loop:"+content);
				content=content+"</body></html>";
				return content;
        	}
        	function seeCrawl()
        	{
        		
        		/* for(var i=0;i<tmplist.length;i++)
              	  {
              	  var j;
              	  for( j=0;j<m_url.length;j++)
              		  if(m_url[j]==tmplist[i])
              			  break;
              	  if(j==m_url.length)
              		  alert("This is not processed: "+tmplist[i]);
              	  }*/
        		
        		
        		
        		var content=getcontentSofar();
        		newPopup(content);
        		return false;
        		
        	}
        	function newPopup(html) {
        		popupWindow = window.open('popUpWindow','name_pop','height=700,width=800,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes');
        		var tmp=popupWindow.document;
        		tmp.write(html);
        		if (window.focus) {newwindow.focus();}
        		
        	}
        	
        	function flist()
        	{
        		if(document.getElementById("filterid").value == "false")
        			{
        			alert("Please Specify filtering sentence first");
        			return false;
        			}
        		var head='<!DOCTYPE html><html><head> <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"><title>Current Filtering List</title></head><body>';
        	var html="";
        		for (var i=0 ;i<markers.length;i++)
        		{
        		if(markers[i].getMap()!=null)
        			{
        	     var thishtml=current_window[i].getContent().substring( current_window[i].getContent().indexOf("Response Time: </b></p>")+23,current_window[i].getContent().indexOf("</div>"));
        		
        	     if(html.indexOf(thishtml) ==-1)
        				{
        	    	 
        				//alert(html+"\n\nIncoming HTML: \n\n" +thishtml);
        				html=html+thishtml;
        				//alert(html);
        				}
        	     /*else if(html.length<thishtml.length)
        	    	 {
        	    	 alert(thishtml);
        	    	 if(thishtml.indexOf(html)!=-1)
        	    		 html=thishtml;
        	    	 else
        	    		 html=html+thishtml;
        	    	 }*/
        			}
        			}
        	html=head+html+"</body></html>";
        	newPopup(html);
        	return false;
        	}
        	
        	/*function restart() {
        		alert("inside restart");
        		var result = confirm("Do you want to restart from scratch?");
        		if (result == true) {
        			document.getElementById("sn").value = true;
        			
        		}
        		else
        			{
        			document.getElementById("sn").value = true;
        			}
        		return false;
        	}*/
        	
        	function Restart()
        	{
        		var url = document.getElementById("urlFV").value;
        		var result = confirm("Do you want to restart from scratch with these URLs?"+"\n"+url);
        		if (result == true) {
        			var data={"baseurl":url};
        			$.ajax({ 
        			    url: "/GeoLocation/sendRestart", 
        			    type: 'POST', 
        			    dataType: 'json', 
        			    data: JSON.stringify(data), 
        			    contentType: 'application/json',
        			    mimeType: 'application/json',
        			    success: function(data) { 
        			    	//alert("send Restart done!");
        	   			     var r =confirm("Clear current page markers?");
        	      			     if(r==true)
        	      			    	 {
        	      			    	 current_window=[];
        	      	          		  m_url=[];
        	      	          		  list={};
        	      	          		  c_list={};
        	      			    	 deleteMarkers();
        	      			    	 }
        			    },
        			    error:function() { 
        			        alert("error");
        			    }
        			});
       
        			//document.getElementById("startbutton").value = "ReStart";
       			 document.getElementById("stopbutton").value = "Stop";
        		}
        		
        			
        		//return false;
        	}
        	function showTree()
        	{
        		var curr_list=[];
        		for(var i=0;i<m_url.length;i++)
        			{
        			if (markers[i].getMap()!=null)
        				curr_list.push(m_url[i]);
        			}
        		var arr={"urlList":curr_list};
        		//alert("Inside showTree");
        		$.ajax({ 
    			    url: "/GeoLocation/getTree", 
    			    type: 'POST', 
    			    dataType: 'json', 
    			    data: JSON.stringify(arr), 
    			    contentType: 'application/json',
    			    mimeType: 'application/json',
    			    success: function(list) { 
    			    	//alert("send URLs successfully!");
    			    	popupWindow = window.open("treemap");
    			    },
    			    error:function() { 
    			        alert("error");
    			    }
    			});
        		return false;
        	}
        	
        	function Saveit(){
        		if (!window.print){
        		alert("You need NS4.x to use this print button!");
        		return
        		}
        		window.print();
        		return false;
        		}
        
    		function initialize() {
            	initMap();
            	//if(docoment.getElementById("sn").value!=null&& !document.getElementById("sn").equals(""))
			    fetchURL();
            }

            google.maps.event.addDomListener(window, 'load', initialize);
			//google.maps.event.addDomListener(window, 'load', mapMarkerAdder);
			mapMarkerAdder();

        </script>
    </head>
    <body>
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="Geomap">Web GeoLocation Visualizer</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
         <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Functionality <b class="caret"></b></a>
      <ul class="dropdown-menu">
        <li><a href="#" onclick="Saveit()" >Download as pdf</a></li>
        <li><a href="#" id="seeCrawl" onclick="seeCrawl()">See Crawling History</a></li>
	    <li><a href="#" id="showTree" onclick="showTree()" >Show Current Filtered Domain tree</a></li>
	 <li><a href="#" onclick="load()" >Load Historical Data</a></li>
	 </ul>
	 </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
      <li><a href="#" onclick="flist()" >See Filtered List</a></li>
      </ul>
      <form class="navbar-form navbar-right" >
       
        <div class="form-group" >
          <input type="text" class="form-control" placeholder="Input domain (eg: .com.sg )" id="FV" style="width: 250px;">
        </div>
        <button type="submit" class="btn btn-default" name="filter" id="filter" >Filter URL result</button>
      </form>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

        <div id="map-canvas"></div>
        <!--div id="delay"--><!-- /div-->
        <div id="rightcolumn">
        <form:form method="post" action="Geomap">
        <table class="table">
				<tr><label>Provide Base Url List</label></tr>
				<tr><form:textarea path="baseurl" rows="25" class="form-control" placeholder="Enter Base Url" id="urlFV"/></tr>
				<tr> <!--td> 
				<input type="submit" value="ReStart" class="btn btn-default" name="start" onclick="restart()"/></td--> 
				
				<td>
						<!--  input type="button" class="btn btn-default"
						value="Start" name="restart" onclick="Restart()" id="startbutton"/></td-->
						<td>
						<input type="button" class="btn btn-default"
						value="Start" name="stop" onclick="save()" id="stopbutton"/></td>
						
			</tr>
		
        </table>
        <input type="hidden" name="saveUrl" id="saveUrl" />
        <input type="hidden" name="sn" id="sn" />
        <input type="hidden" name="filterid" id="filterid" value="false"/>
        </form:form>
        
        <!--button id="b" onClick="exportToCsv()">export to CSV</button-->
        </div>
    </body>
</html>
